<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />
      <div class="main-content">
          <!-- left -->
          <ranking-board />
          <!-- mid sale and brand -->
          <water-chart />
          <!-- right month sales -->
          <bar-chart />
          
      </div>
      <chat-bot />
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from './topHeader'
import rankingBoard from './rankingBoard'
import waterChart from './waterChart'
import barChart from './barChart'
import chatBot from './chatBot'

export default {
  name: 'DataView',
  components: {
    topHeader,
    rankingBoard,
    waterChart,
    barChart,
    chatBot
  },
  data () {
    return {
      isChatOpen: false,
      userInput: '',
      messages: [
        { text: '您好！我是小西AI助手，请问有什么可以帮您的吗？', sender: 'bot-message' }
      ],
      // 简单的问答知识库
      knowledgeBase: {
        '你好': '您好！很高兴为您服务。',
        '你好啊': '您好！有什么我可以帮助您的吗？',
        '你是谁': '我是您的小西AI助手，可以帮助解答问题。',
        '有什么功能': '我可以回答您的问题，提供帮助信息。',
        '谢谢': '不客气，很高兴能帮到您！',
        '再见': '再见！如果需要帮助随时可以找我。',
        '默认': '抱歉，我不太明白您的问题。您可以尝试换种方式提问。'
      }
    }
  },
  methods: {    
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
 </style>